<template>
	<u-row gutter="10" class="game-item">
		<u-col span="3" class="game-header">
			<u--image
				:src="row.game.icon" 
				:fade="true" 
				mode="aspectFit"
				duration="450" 
				radius="20" 
				width="20vw"
				height="20vw">
				  <template v-slot:loading>
					<u-loading-icon></u-loading-icon>
				  </template>
				  <view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
		</u-col>
		<u-col span="6" justify="space-evenly" class="game-body">
			<view class="game-name">{{ row.game.name }}</view>
			<view class="game-process">
				<u-line-progress 
				:percentage="downloadProcess"
				 height="15"
				:showText="true"/>
			</view>
			<view class="game-size">
				{{ $helper.formatBytesSize(downloadedSize) }}/{{ $helper.formatBytesSize(totalSize) }}
				<view class="" v-if="row.filename">{{ row.filename }}</view>
			</view>
		</u-col>
		<u-col span="1" justify="space-evenly">
			<icon type="clear" @click="del(index)" v-show="downloadProcess<100"></icon>
		</u-col>
		<u-col span="2" justify="space-evenly" class="game-footer">
			<!-- <u-button size="mini" type="primary" plain shape="circle" class="btn-action" @click="row.btnAction()">{{ row.btnText() }}</u-button> -->
			<u-button size="mini" type="primary" plain shape="circle" class="btn-action" @click="row.start()" v-if="downloadState===0">下载</u-button>
			<u-button size="mini" type="primary" plain shape="circle" class="btn-action" @click="row.pause()" v-if="downloadState===3">暂停</u-button>
			<u-button size="mini" type="primary" plain shape="circle" class="btn-action" @click="row.open()" v-if="downloadState===4">打开</u-button>
			<u-button size="mini" type="primary" plain shape="circle" class="btn-action" @click="row.resume()" v-if="downloadState===5">继续</u-button>
		</u-col>
	</u-row>
</template>

<script>
	import downloadClass from "@/common/helper-download.js";
	export default {
		props: {
			data: {
				type: Object,
				default () {
					return {};
				}
			},
			index: {
				type: Number,
				default() {
					return 0;
				}
			},
		},
		data() {
			return {
				row: {
					game: {},
					download: {},
				},
			};
		},
		watch: {
			data() {
				console.log("记录一下, 但是不同步");
				// this.syncData()
			}
		},
		computed: {
			downloadProcess() {
				return this.row.downloadProcess || 0;
			},
			downloadedSize() {
				return this.row.downloadedSize || 0;
			},
			totalSize() {
				return this.row.totalSize || 0;
			},
			downloadState() {
				return this.row.downloadState || 0;
			},
		},
		watch: {
			downloadProcess() {
				this.$store.commit("download/LISTS_SAVE", {index: this.index, data: this.data,});
			}
		},
		methods: {
			syncData() {
				let data = this.data;
				// 什么情况会进来
				// 
				if (!data.game) {
					console.log("不应该啊")
				}
				console.log("aaaaaaaa", downloadClass.prototype.isPrototypeOf(data))
				// 已经失去对象属性了, 直接重置
				if (!downloadClass.prototype.isPrototypeOf(data)) {
					console.log("创建之前", data)
					data = new downloadClass(data.game, data.url, false, false, data.downloadState, data.downloadedSize, data.totalSize, data.filename)
				}
				console.log("最终row", data);
				this.row = data;
			},
		
			del(index) {
				// 单独处理, 需要用户同意
				this.row.abort().then(res => {
					this.$emit("del");
				})
			}
		},
		created() {
			this.syncData();
		}
	}
</script>

<style lang="scss" scoped>
	.game-item {
		padding: 12px 15px;
		width: calc(100vw - 30px);
		border-bottom: 1px solid #eee;
		.game-header {
			// width: 20vw;
		}
		
		.game-body {
			height: 20vw;
			.game-name {
				font-size: 4vw;
				font-weight: bold;
			}
			.game-process {
				width: 100%;
			}
			.game-size {
				color: #7d7d7d;
				font-size: 2vw;
			}
		}
		
		.game-footer {
			height: 20vw;
			.btn-action {
				// width: 10vw;
				background: #eee;
				border: none;
				font-size: 3.4vw;
			}
		}
		
	}
	
</style>